<template>
  <div>

    <div class="row">
      <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet box grey-cascade" style="min-height: auto;">
          <div class="portlet-body">
            <ul class="nav nav-tabs">
              <li>
                <router-link to="/sbtzxx" tag="a">
                   基础数据
                </router-link>
              </li>
              <li class="active">
                <router-link to="/sbtzwxjl" tag="a" class="">
                   维修记录
                </router-link>
              </li>
              <li>
                <router-link to="/sbtzwbjl" tag="a" class="">
                   维保记录
                </router-link>
              </li>
              <li>
                <router-link to="/sbtzgjjl" tag="a" class="">
                   告警记录
                </router-link>
              </li>
            </ul>
          </div>
        </div>
        <div class="portlet box grey-cascade">
          <transition name="fade">
            <Loading :listLoading.sync="loading"></Loading>
          </transition>
          <div class="portlet-title">
            <div class="caption">
              <i class="fa fa-globe"></i>{{this.title}}
            </div>
           <div class="cz">

              <button id="sample_editable_1_new" class="btn green" @click="addYgInfor">新增 <i class="fa fa-plus"></i></button>
              <button id="sample_editable_1_new" style="margin-right: 10px;" class="btn red" data-toggle="modal"  @click="allDelete()">批量删除 <i class="fa fa-trash-o"></i></button>
              <div class="btn-group pull-right ">
                <button class="btn dropdown-toggle">导出Excel 
                <!-- <i class="fa fa-angle-down"></i> -->
                </button>
              <!--   <ul class="dropdown-menu pull-right style">
                  <li>
                    <a href="javascript:;">
                    打印 </a>
                  </li>
                  <li>
                    <a href="javascript:;">
                    另存为PDF </a>
                  </li>
                  <li>
                    <a href="javascript:;">
                    导出为Excel </a>
                  </li>
                </ul> -->
              </div>
          
            </div>

          </div>
          <div class="portlet-body">
        
            <div class="row color mbStyle">
                <div class="col-md-2" style="padding-left: 0;">
                  <i class="el-input__icon el-icon-caret-bottom"></i>
                  <select class="bs-select form-control" style="margin-right: 25px;">
                    <option selected="" value="全部">全部</option>
                    <option value="设备维保计划数量">输出电压</option>
                    <option value="设备维保计划完成数量">故障指示</option>
                    <option value="设备故障率">发电机停止/启动</option>
                  </select>
                </div>
                <div class="col-md-2" style="padding-left: 10px;">
                  <el-time-select
                    placeholder="起始时间"
                    v-model="startTime"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30'
                    }">
                  </el-time-select>
                </div>
                <div class="col-md-2">
                  <el-time-select
                    placeholder="结束时间"
                    v-model="endTime"
                    :picker-options="{
                      start: '08:30',
                      step: '00:10',
                      end: '18:30',
                      minTime: startTime
                    }">
                  </el-time-select>
                </div>
                <div class="col-md-1 mb10">
                  <div class="search">
                    <button class="btn green">查询 <i class="fa fa-search"></i></button>
                  </div>
                </div>
              
            </div>
            <div class="tableDiv">
              <table class="table table-striped table-bordered table-hover" style="color: #333;font-weight: 500;" id="sample_3">
                <thead>
                  <tr>
                  <th class="table-checkbox">
                    <input type="checkbox" class="group-checkable" @click="allCheck($event)" /> 全选
                  </th>
                  <th>
                     序号
                  </th>
                  <th>
                     时间
                  </th>
                  <th>
                     维修类型
                  </th>
                  <th>
                     维修信息描述
                  </th>
                  <th>
                     维修人员
                  </th>
                  
                  <th>联系电话</th> 
                  
                </tr>
                </thead>
              <tbody>

                <tr class="odd gradeX" v-for="(item,index) in list">
                  <td>
                    <input type="checkbox" class="checkboxes" value="1" @click="checkT(item,$event)"/>
                  </td>
                  <td>
                   {{(page_num-1)*page_size+index+1}}
                </td>
                <td>
                  {{item.district_name}}
                </td>
                <td>
                  {{item.area_name}}
                </td>
                <td>
                   {{item.cell_no}}
                </td>
                <td>
                   {{item.cell_name}}
                </td>
                <td>
                   {{item.extra_desc}}
                </td>
                </tr>
              
                </tbody>
              </table>
               <!--无数据提示开始-->
              <transition name="fade">
                <NotConTip :showTip.sync="showTip" :tipText="tipText"></NotConTip>
              </transition>
              <!--无数据提示结束-->
               <div class="block">                    
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 15]"
                  :page-size="page_size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div> 

            </div>
          </div>
        </div>
        <!-- END EXAMPLE TABLE PORTLET-->
      </div>
    </div>

    <!-- 确定删除弹框开始 -->
    <div id="delete" class="modal fade" tabindex="-1" >
      <div class="modal-title">
        <p>
           确定删除?
        </p>
      </div>
      <div class="modal-body">
        <p style="color: #ff3300;">
          是否要删除单元名为{{lookObj.cell_name}}的信息！
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
        <button type="button" data-dismiss="modal" @click="sureDelete" class="btn blue">确定</button>
      </div>
    </div>
    <!-- 确定删除弹框结束 -->

  </div>

</template>

<style scoped>
    .cz{float: right;width: auto;position: relative;top: 3px;left: 5px;}
    .row.center .col-md-3{text-align: center;margin-bottom: 10px;color: #666;font-weight: 500;}
    p {margin: 0 0 10px;}
    .row.center .col-md-6{text-align: left;margin-bottom: 10px;color: #666;font-weight: 500;}
    .row.center .col-md-6 input{border: 1px solid #dbdbdb;width: 50px;padding-left: 5px;color: #333;font-weight: 500;}
    table tr td{text-align: center;vertical-align: middle;}
    .search{margin: 0 0 10px;}
    .search .form-control{width: 100%;display: inline-block;}
    .search button{position: relative;color: #fff;}
    .imgDiv img{width: 100%;}
    .undefinedbootstrap_full_number{text-align: center;;}
    .pagination{display: inline-block;}
    .dataTotal{color: #666;font-weight: 500;position: relative;top: -20px;left: 10px;}
    .pagination li a,.pagination li a .fa{color: #666;font-weight: 500;}
    .pagination li.active a,.numData{color: #26a69a;font-weight: 500;}
    .numData{font-size: 16px;}
    .row.color span{color: #333;font-weight: 500;}
    .modal-body p{color: #333;font-size: 16px;font-weight: 500;}
    .row.m0{margin: 0;}
    .row.m10 .col-md-6 >div{margin-bottom: 10px;}
    .row.m10 .col-md-6 .col-md-3{position: relative;top: 6px;color: #333;font-weight: 500;}
      input.form-control,.bs-select.form-control{width: 95%;display: inline;}
    .col-md-9{color: #333;font-weight: 500;}
    @media (max-width: 768px){
      .cz{margin-bottom: 0px;}
      .dataTotal{top: -5px;}
      .bs-select{width: 60%;}
    }

</style>

<script>

  import Metronic from '../../../../../static/global/js/metronic.js';
  import {check,Tips} from '../../../../../static/js/pages/tips.js';
  import '../../../../../static/js/pages/page.js';
  import ComponentsPickers from '../../../../../static/js/pages/components-pickers.js';



  import NotConTip from '../../../../components/noConTip.vue'

  import optVue from '../../../../config/optVue.js';
  import Loading from '../../../../components/loading.vue';
  export default {
    data(){
      return{
        selectedXq:"-1",
        xqList:[],
        area_id:-1,

        selectedLd:"-1",
        ldList:[],
        building_id:-1,

        list:[],
        tipText:"暂无数据",
        showTip:false,
        total:null, //总条数  
        lookObj:{},

        title:"",
 
        pageNum: null, //页数
        page_size: null, //每页显示多少条
        page_num: null, //当前页码
     
       
        id:null,
        index:null,
        idArr:[],
        building_id:-1,
        cell_name:"",
        area_id:window.localStorage.getItem('x-area-id'),
        cell_no:"",
        extra_desc:"",
        currentPage:1,
        pages:1000,

        loading:false,
        loadTime:1000,

        options: [],
        startTime: '',
        endTime: '',

      }
    },
    components: {
        NotConTip,Loading
    },
    mounted(){
      document.title = '设备台账-维修记录';
      var that = this;
      this.title = document.title
      var dataArr = {
        ril : "S",
        page_size:this.pages
      }
      setTimeout(() => {
        that.loading=true;
        optVue.pqxq(that);
        optVue.dygl(this);
      }, this.loadTime)
      
      $(function(){
        ComponentsPickers.init();
        /*全选反选*/
        check.init($(".table-checkbox"),$(".checkboxes"));
        
      })
    },
     
    methods:{
      handleSizeChange(val) {
        var pageArr = {
          page_num:this.currentPage,
          page_size : val
        }
        $(".checkboxes").prop({checked:false});
        $(".group-checkable").prop({checked:false});
        this.pageFun(pageArr);
      },
      handleCurrentChange(val) {
        var pageArr = {
          page_num : val,
          page_size : this.page_size
        }
        $(".checkboxes").prop({checked:false});
        $(".group-checkable").prop({checked:false});
        this.loading = false;
        this.pageFun(pageArr);
      },
      pageFun:function(pageArr){
        $(".checkboxes").prop({checked:false});
        $(".group-checkable").prop({checked:false});
        this.loading = false;
        var that = this;
       
        setTimeout(function(){
          that.loading = true;
          optVue.dyglNowPag(that,pageArr);
        },that.loadTime)
      },
      handleChange(val) { //下拉选择
        console.log(JSON.stringify(val));
      },
      // changeSelectXq:function(select){
      //   this.area_id=select;
      //   if(this.area_id!=-1){
      //     $(".errorXq").addClass("hide");
      //     $(".errorXq").closest(".col-md-6").find("select").removeClass("errorInput");
      //   }
      // },

      changeSelectLd:function(select){
        this.building_id=select;
        if(this.building_id!=-1){
          $(".errorLd").addClass("hide");
          $(".errorLd").closest(".col-md-6").find("select").removeClass("errorInput");
        }
      },
      addYgInfor:function(){
        this.$router.push({path:'/dyglComonents', query: {type: 'add'}})
      },
      deleteData:function (datas,index) {
        this.idArr.push(datas.list[index].cell_id);
        this.index = index;
        this.lookObj = datas.list[index]
      },
      changeSelect:function(select){
        this.building_id = select;
        if(this.building_id != -1){
          $(".errorDy").addClass("hide");
          $(".errorDy").closest(".col-md-6").find("input").removeClass("errorInput");
        }
      },
      lookData : function(data,index){
        window.localStorage.setItem('cell_id', datas.list[index].cell_id)
        this.$router.push({path:'/dyglComonents', query: {type: 'update'}})
      },
      sureDelete:function(){
        var pageArr = {
          page_size : this.page_size,
          page_num : this.currentPage,
        }
        if(this.list.length==1){
          var pageArr = {
            page_size : this.page_size,
            page_num : this.currentPage-1
          }
        }
        var arrId = {
          cell_ids : this.idArr.join(",")
        }
        optVue.deleteDyData(this,this.index,Tips,pageArr,arrId);
        $(".checkboxes").prop({checked:false})
      },
      checkT:function(item,e){
        //console.log($.inArray(item.cell_id, this.idArr))
        if($(e.target).is(':checked')){
          if($.inArray(item.cell_id, this.idArr) < 0){

            this.idArr.push(item.cell_id);
          }
          
        }else{
          for(var i=0; i<this.idArr.length; i++) {
            if(this.idArr[i] == item.cell_id) {
              this.idArr.splice(i, 1);
              break;
            }
          }
        }
        //console.log(JSON.stringify(this.idArr)) 
        
      },
      inputFunc:function(e){
        if($.trim($(e.target).val())!=""){
          $(e.target).closest(".col-md-6").find(".errorInfor").addClass("hide");
          $(e.target).closest(".col-md-6").find("input").removeClass("errorInput");
        }
      },
      allCheck:function(e){
        if($(e.target).is(':checked')){
          for(var i=0; i<this.list.length; i++) {
            this.idArr.push(this.list[i].cell_id)
          }
        }else{
          this.idArr = [];
        }
          
        //console.log(JSON.stringify(this.idArr)) 
      },  
      allDelete:function(event){
     
        if($(".checkboxes").is(':checked')){
          var pageArr = {
            page_num : this.currentPage-1
          }
          
          var arrId = {
            cell_ids : this.idArr.join(",")
          }

          optVue.deleteDyData(this,this.index,Tips,pageArr,arrId);
          
          this.idArr = [];
          $(".checkboxes").prop({checked:false});
          $(".group-checkable").prop({checked:false}) 
        }
        else{
          Tips.init({
            type:"fail",
            message:"请选择要删的项",
            class:"on"
          });
        }
      },
      modifyData:function(datas,index){
        window.localStorage.setItem('cell_id', datas.list[index].cell_id)
        this.$router.push({path:'/dyglComonents', query: {type: 'update'}})
      }
    }

  }


</script>



